<template>
	<div class="content">
		<div class="content-top">
			活动管理_编辑信息
		</div>
		<div class="car-title">
			<div class="car-title-left">基本信息</div>
			<div class="car-title-right" @click="editCoupon"><i class="el-icon-edit"></i>修改</div>
		</div>
		<div class="car-detail">
			<el-row>
				<el-col :span="8">优惠券名称：{{detail.name}}</el-col>
				<el-col :span="8">优惠券编码：{{detail.code}}</el-col>
				<el-col :span="8">面额：{{detail.amount}}</el-col>
			</el-row>
            <el-row>
				<el-col :span="8">发行数量：{{detail.publishCount}}</el-col>
				<el-col :span="8">领取数量：{{detail.receiveCount}}</el-col>
				<el-col :span="8">每人限领：{{detail.perLimit}}</el-col>
			</el-row>
            <el-row>
				<el-col :span="8">使用门槛：{{detail.minPoint}}</el-col>
				<el-col :span="8">使用类型：{{detail.useType}}</el-col>
				<el-col :span="8">开始领取时间：{{detail.enableTime}}</el-col>
			</el-row>
            <el-row>
				<el-col :span="8">生效时间：{{detail.startTime}}</el-col>
				<el-col :span="8">结束时间：{{detail.endTime}}</el-col>
			</el-row>
            <el-row>
				<el-col :span="24">备注：{{detail.note}}</el-col>
			</el-row>
		</div>
        <div class="car-title"  style="margin-bottom:20px">
			<div class="car-title-left">领取记录</div>
            <div class="search-right">
				<label>领取人姓名：</label>
                <input type="text" class="inputName" v-model="name" placeholder="请输入领取人姓名">
				<el-button type="primary" size="mini" @click="onUserSearch">搜索</el-button>
            </div>
		</div>
		<div class="car-table-page">
        <div class="car-detail-table">
			<el-table show-header :data="recordList" stripe style="width: 100%;">
				<el-table-column align="center" label="领取人用户名">
					<template slot-scope="scope">{{scope.row.consumerUsername}}</template>
				</el-table-column>
				<el-table-column align="center" label="领取类型">
					<template slot-scope="scope">{{textConversion(scope.row.getType)}}</template>
				</el-table-column>
				<el-table-column align="center" label="使用状态">
					<template slot-scope="scope">{{scope.row.useStatus}}</template>
				</el-table-column>
				<el-table-column align="center" label="使用订单编号">
					<template slot-scope="scope">{{scope.row.orderId}}</template>
				</el-table-column>
				<el-table-column align="center" label="使用时间">
					<template slot-scope="scope">{{scope.row.useTime}}</template>
				</el-table-column>
			</el-table>
		</div>
            <div class="content-page">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
				:page-size=limit layout="prev, pager, next, jumper" :total=total>
				</el-pagination>
			</div>
		</div>
        <div class="car-title center-button">
			<center>
				<el-button type="primary" @click="onBack"><i class="el-icon-back"></i>返回</el-button>
                <el-button type="primary" @click="onGrant">发放</el-button>
			</center>
		</div>
        <div v-show="is_grant">
            <div class="car-detail">
			<el-row>
				<el-col :span="7">
                    <label for="">用户名：</label>
                    <el-input style="width:65%" v-model="userName" type="text"></el-input>
                </el-col>
				<el-col :span="7">
                    <label for="">手机号码：</label>
                    <el-input style="width:65%" v-model="phone" type="text"></el-input></el-col>
				<el-col :span="7">身份证号码：</label>
                    <el-input style="width:65%" v-model="identityNum" type="text"></el-input>
                </el-col>
                <el-col :span="3">
                   <el-button type="primary" @click="onSearch">搜索</el-button>
                </el-col>
			</el-row>
           <div class="grant-table">
              <el-table
			    :data="userList"
                border
                style="width: 94%"
                @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                prop="username"
                label="用户名"
                >
                </el-table-column>
                <el-table-column
                prop="nickname"
                label="昵称"
               >
                </el-table-column>
                <el-table-column
                prop="phone"
                label="手机号码">
                </el-table-column>
                <el-table-column
                prop="identityNum"
                label="身份证号码">
                </el-table-column>
                <el-table-column
                prop="email"
                label="邮箱">
                </el-table-column>
            </el-table>
			<div class="content-page">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange1" :current-page.sync="userPage"
				:page-size=userLimit layout="prev, pager, next, jumper" :total=userTotal>
				</el-pagination>
			</div>
           </div>
             
		</div>
        <div class="car-title center-button">
			<center>
				<el-button type="primary" @click="grantCoupon(1)">确定发放</el-button>
                <el-button type="primary" @click="grantCoupon(2)">全部发放</el-button>
			</center>
		</div>
        </div>
		<template v-if="is_edit">
			<div class="all-screen"></div>
			<div class='add-box'>
				<CouponEdit @saveEdit='saveEdit' :detail=detail></CouponEdit>
			</div>
		</template>
        
        
		
	</div>
</template>

<script>
import CouponEdit from '@/components/coupon/CouponEdit.vue'
	export default{
		props:['id'],
		components:{
		   CouponEdit:CouponEdit
		},
		data(){
			return{
			   reason:'',
			   detail:'',
			   page:1,
               limit:5,
               total:1,
               multipleSelection:[],
			   is_grant:false,
			   is_edit:false,
			   recordList:[],
			   userList:[],
			   userPage:1,
			   userLimit:5,
			   userTotal:1,
			   name:'',
			   identityNum:'',
			   userName:'',
			   phone:'',
			   getType:[{id:0,name:'后台赠送'},{id:1,name:'主动获取'}]

			}
			
		},
		created() {
		},
		mounted() {
			this.get_detail()
			this.get_coupon_list()
		},
		methods:{
			editCoupon(){
			   this.is_edit = true
			
			},
			saveEdit(type) {
				if (type == 2) {
					 this.$emit("saveEdit", 2);
				}
				this.is_edit = false;
				
			},
             handleSelectionChange(val) {
				this.multipleSelection = val
            },
			textConversion(idx){
				for(let item of this.getType){
					if(item.id == idx){
                      return item.name
					}
				}
			},
			/* 获取详情 */
			get_detail(){
				var self = this
                this.$axios.get(this.$global.serverIp + 'frontend/coupon/detail/' + this.id)
					.then(function(res) {
						if (res != '') {
							self.detail = res.data
						}
				
					})
			},
			/* 领取记录 */
			get_coupon_list(){
				var self = this
                this.$axios.post(this.$global.serverIp + 'frontend/couponHistory/findPage',{
					"page":self.page,
					"limit":self.limit,
					"consumerUsername":self.name
				})
					.then(function(res) {
						if (res != '') {
							self.recordList = res.data.list
							self.total = res.totalCount
						}
				
					})
			},
			onSearch(){
				this.userPage = 1
				this.get_cusumer_user()
			},
			onUserSearch(){
				this.page = 1
				this.get_coupon_list()
			},
			onGrant(){
				this.is_grant = !this.is_grant
				this.get_cusumer_user()
			},
			/* 获取客户 */
			get_cusumer_user(){
               var self = this
                this.$axios.post(this.$global.serverIp + 'frontend/consumerUser/findPage',{
					"page":self.userPage,
					"limit":self.userLimit,
					"username":self.userName,
					"phone":self.phone,
					"identityNum":self.identityNum
				})
					.then(function(res) {
						if (res != '') {
							self.userList = res.data.list
							self.userTotal = res.data.totalCount
						}
				
					})
			},
			
			handleSizeChange(val) {
			
			},
			handleCurrentChange(val) {
				this.page = val;
				this.get_coupon_list();
			},
			handleCurrentChange1(val) {
				this.userPage = val;
				this.get_cusumer_user();
            },
            onBack(){
               this.$emit("saveEdit", 2);
			},
			grantCoupon(type){
				if(type == 1){
                   if(this.multipleSelection == ''){
						this.$popup.open('发放对象不能为空')
						return;
				   }
				}
				 var self = this
				 var isAllUserGrant = 0
				 var data = {}
				 var temp = []
				 for(let item of self.multipleSelection){
                     temp.push(item.id)
				 }
                 if(type == 2){
					isAllUserGrant = 1
					data={
						"couponIds": [self.detail.id],
						"isAllUserGrant": isAllUserGrant
					}
				 }else{
					 data={
						"consumerIds":temp,
						"couponIds": [self.detail.id],
						"isAllUserGrant": isAllUserGrant
					}
				 }
				this.$axios.post(this.$global.serverIp + 'frontend/coupon/grant',data)
				    .then(function(res) {
							if (res != '') {
								self.$popup.open('发放成功')
							}
					
					})
			},
        }
    }
</script>

<style>
	.car-title {
		margin: 26px 0px 0px 30px;
		overflow: hidden;
		font-size: 16px;
        width: 1088px;
	}
	
	.car-title-left {
		float: left;
		color: #606B82;
		margin-bottom: 16px;
	}
	
	.car-title-right {
		float: right;
		color: #FD943F;
		margin-bottom: 10px;
	}
	
	.car-title-right:hover {
		cursor: pointer;
		opacity: 0.3;
	}
	
	.car-detail {
		width: 1088px;
		/* height: 300px; */
		background-color: #F2F6FA;
		border: 1px solid #C9CDD1;
		padding-left: 30px;
		box-sizing: border-box;
		margin-left: 30px;
		padding-top: 40px;
		padding-bottom: 30px;
	}
	.car-detail-table{
		width: 1088px;
		height: 300px;
		overflow: auto;
		background-color: #F2F6FA;
		border: 1px solid #C9CDD1;
		margin-left: 30px;
	}
	.car-table-page{
		width: 1088px;
		height: 300px;
	}
	.car-detail .el-row {
		margin-bottom: 30px;
		font-size: 14px;
		color: #2D384C;
	}
	.application-reason{
		display: flex;
		align-items: flex-start;
	}
	.center-button{
		padding-bottom: 30px;
    }
    .car-detail .el-row .el-col{
        display:inline-block
    }
	.search-right{
		display: flex;
		width:500px;
		font-size: 15px;
		padding-left: 20px;
		color:#606B82;
	}
	.inputName{
		width: 40%;
		margin: 0 10px;
		height: 30px;
		border: 1px solid rgb(219, 219, 219);
		padding: 0 5px;
		border-radius: 4px;
		outline: none;
	}
</style>

